<template>
  <div>
    <div class="layer-control" :style="styles" ref="layerControl">
      <div class="pre" @click="loadPreLayers" v-if="showPre">&lt;</div>
      <ul class="layer">
        <template v-for="(item,index) in showLayers">
          <li :key="index" class="layer-detail" v-if="item && item.show">
            <div class="layer-title" :style="{background:background}">
              {{item.name}}
              <span class="layer-btn" @click="removeLayer(item)">
                <i class="iconfont icon-yanjing"></i>
              </span>
            </div>
            <div @click.stop.capture="setOverLayerColor($event,index)">
              <div class="layer-content" v-html="item.html"></div>
            </div>
          </li>
        </template>
      </ul>
      <div class="more" @click="loadMoreLayers" v-if="showMore">&gt;</div>
    </div>
    <color-picker
      v-if="ColorPickerVisible"
      :left="leftColorPicker"
      :bottom="bottomColorPicker"
      :curClickLayer="curClickLayer"
      @close="ColorPickerVisible = false"
      @colors="setCustomOverLayerColor"
    ></color-picker>
  </div>
</template>

<script>
import { setTimeout } from 'timers'
import sgisLayerBase from '@/utils/map/sgis.layer.base.js'
import ColorPicker from '@/components/colorPicker/index'
export default {
  name: 'LegendFrame',
  props: ['top', 'left', 'bottom', 'right', 'background', 'otherLegend'],
  components: { ColorPicker },
  data () {
    return {
      styles: {
        position: 'absolute',
        bottom: '15px',
        left: '15px'
      },
      showLayers: [],
      curPosition: {
        start: 0,
        len: 0
      },
      showPre: false,
      showMore: false,
      layers: sgisLayerBase.overLayers,
      leftColorPicker: '0px',
      bottomColorPicker: '0px',
      curClickLayer: -1, // 当前点击图层显示颜色选择器
      ColorPickerVisible: false
    }
  },
  created () {
    this.layers = this.otherLegend
      ? this.otherLegend
      : sgisLayerBase.overLayers
    this.initPosition()
    this.showLayers = this.layers.slice(0)
  },
  mounted () {
    if (this.layers.length) {
      this.calLayerControlStyle()
    } else {
      this.showLayers = this.layers.slice(0)
    }
    const cal = () => {
      setTimeout(() => {
        // reset params
        this.showPre = false
        this.showMore = false
        this.curPosition = {
          start: 0,
          len: 0
        }
        this.showLayers = this.layers.slice(0)
        // reset params
        this.$nextTick(() => {
          try {
            this.calLayerControlStyle()
          } catch (err) {
            console.log(err)
          }
        })
      }, 1000)
    }
    window.onresize = cal
  },
  methods: {
    setCustomOverLayerColor (color) {
      const colors = color.slice(0)
      for (const key in colors) {
        colors[key] = '#' + colors[key]
      }
      const layerInfo = this.showLayers[this.curClickLayer]
      layerInfo.layer.setCustomColor(layerInfo.layer, {
        colors
      })
    },
    setOverLayerColor (e, index) {
      this.curClickLayer = index
      // this.leftColorPicker = e.clientX - e.offsetX + 140 + "px";
      this.leftColorPicker = (index + 1) * 140 + 75 + index * 10 + 'px'
      this.bottomColorPicker = '2px'
      const layerInfo = this.showLayers[this.curClickLayer]
      if (layerInfo.layer.hasOwnProperty('setCustomColor')) {
        this.ColorPickerVisible = true
      }
    },
    removeLayer (item) {
      this.ColorPickerVisible = false
      if (this.otherLegend) {
        this.$emit('closeLegend', item)
        return
      }
      sgisLayerBase.removeOverLayer(item.layerId)
    },
    initPosition () {
      if (this.top) {
        this.styles.top = this.top
      }
      if (this.left) {
        this.styles.left = this.left
      }
      if (this.bottom) {
        this.styles.bottom = this.bottom
      }
      if (this.top) {
        this.styles.right = this.right
      }
    },
    calLayerControlStyle () {
      const oB = this.$refs['layerControl']
      const style = this.computeElStyle(oB, null)
      const elHeight = parseInt(style.height.slice(0, -2))
      const elWidth = parseInt(style.width.slice(0, -2)) - 90
      if (elHeight) {
        this.reCalLayerControlStyle(oB, elHeight, elWidth)
      }
    },
    reCalLayerControlStyle (oB, elHeight, elWidth) {
      // 超出篇幅计算开始
      const layersEl = oB.querySelectorAll('li')
      let layerWidth = 0
      this.showLayers = []
      let key = this.curPosition.start
      if (key < 0) {
        key = 0
      }
      let count = 0
      for (key; key < layersEl.length; key++) {
        count++
        const item = layersEl[key]
        const layerStyle = this.computeElStyle(item)
        layerWidth += parseInt(layerStyle.width.slice(0, -2)) + 10
        if (layerWidth > elWidth) {
          return
        }
        if (count > 4) {
          return
        }
        this.showLayers.push(this.layers[key])
        this.curPosition = {
          ...this.curPosition,
          len: this.showLayers.length
        }
        if (
          this.curPosition.start + this.showLayers.length <
          this.layers.length
        ) {
          this.showMore = true
        } else {
          this.showMore = false
        }
        if (this.curPosition.start !== 0) {
          this.showPre = true
        } else {
          this.showPre = false
        }
      }
      // 超出篇幅计算结束
    },
    loadPreLayers () {
      this.showLayers = this.layers.slice(0)
      this.showMore = true
      this.$nextTick(() => {
        const oB = this.$refs['layerControl']
        const style = this.computeElStyle(oB, null)
        const elHeight = parseInt(style.height.slice(0, -2))
        const elWidth = parseInt(style.width.slice(0, -2))
        if (elHeight) {
          this.reCalLayerStyleP(oB, elHeight, elWidth)
        }
      })
    },
    loadMoreLayers () {
      this.showLayers = this.layers.slice(0)
      this.showPre = true
      this.$nextTick(() => {
        const oB = this.$refs['layerControl']
        const style = this.computeElStyle(oB, null)
        const elHeight = parseInt(style.height.slice(0, -2))
        const elWidth = parseInt(style.width.slice(0, -2))
        if (elHeight) {
          this.reCalLayerStyle(oB, elHeight, elWidth)
        }
      })
    },
    reCalLayerStyle (oB, elHeight, elWidth) {
      // 超出篇幅计算开始
      const layersEl = oB.querySelectorAll('li')
      let layerWidth = 0
      this.showLayers = []
      let key = this.curPosition.start + this.curPosition.len
      this.curPosition.start = key
      let count = 0
      for (key; key < layersEl.length; key++) {
        count++
        const item = layersEl[key]
        const layerStyle = this.computeElStyle(item)
        layerWidth += parseInt(layerStyle.width.slice(0, -2)) + 10
        if (layerWidth > elWidth) {
          return
        }
        if (count > 4) {
          return
        }
        this.showLayers.push(this.layers[key])
        this.curPosition = {
          ...this.curPosition,
          len: this.showLayers.length
        }
        const isA = this.curPosition.start + this.curPosition.len
        if (isA >= this.layers.length) {
          this.showMore = false
        } else {
          this.showMore = true
        }
      }
      // 超出篇幅计算结束
    }, // 计算往后翻页
    reCalLayerStyleP (oB, elHeight, elWidth) {
      // 超出篇幅计算开始
      const layersEl = oB.querySelectorAll('li')
      let layerWidth = 0
      this.showLayers = []
      let key = this.curPosition.start - 1
      let count = 0
      for (key; key >= 0; key--) {
        count++
        const item = layersEl[key]
        const layerStyle = this.computeElStyle(item)
        layerWidth += parseInt(layerStyle.width.slice(0, -2)) + 10
        if (layerWidth > elWidth) {
          return
        }
        if (count > 4) {
          return
        }
        this.showLayers.unshift(this.layers[key])
        this.curPosition = {
          start: key,
          len: this.showLayers.length
        }
        if (key === 0) {
          this.showPre = false
        }
      }
      // 超出篇幅计算结束
    }, // 计算往前翻页
    computeElStyle (el) {
      let style = ''
      try {
        style = document.defaultView.getComputedStyle(el, null)
      } catch (err) {
        console.log(err)
      }
      return style
    }
  },
  watch: {
    layers () {
      // reset params
      this.showPre = false
      this.showMore = false
      this.showLayers = this.layers.slice(0)
      // 特殊情况
      if (!this.layers.length) {
        this.curPosition = {
          start: 4,
          len: 4
        }
        return
      }
      // 特殊情况
      if (this.curPosition.start >= this.showLayers.length) {
        this.curPosition.start -= 4
      }

      // reset params
      this.$nextTick(() => {
        try {
          this.calLayerControlStyle()
        } catch (err) {
          console.log('')
        }
      })
    },
    otherLegend () {
      this.layers = this.otherLegend
        ? this.otherLegend
        : sgisLayerBase.overLayers
    }
  }
}
</script>

<style rel='stylesheet' lang='scss' scoped>
@import "./../../assets/css/rule.scss";
.layer-control {
  background: $backGroundColorDeep;
  position: absolute;
  left: 15px;
  bottom: 15px;
  ul.layer {
    margin: 0;
    padding: 0 50px 0px 40px;
    display: table-cell;
    .layer-detail {
      color: $fontColor;
      position: relative;
      z-index: 999;
      list-style: none;
      margin-left: 10px;
      display: inline-block;
      vertical-align: bottom;
      // box-sizing: border-box;
      border-radius: 5px;
      bottom: 0;
      .layer-title {
        line-height: 35px;
        // color: $fontColorW;
        font-weight: bold;
        font-size: $fontSizeNav;
        padding-left: 10px;
        // background: $colorBackground;
        background: $backGroundColorDeep;
        border-radius: 5px 5px 0 0;
        .layer-btn {
          cursor: pointer;
        }
      }
      .layer-content {
        background: $backGroundColor;
        width: 140px;
        max-height: 270px;
        min-height: 80px;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 0 0 5px 5px;
        cursor: pointer;
      }
    }
  }
  .more {
    width: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    font-size: $fontSizeTitle;
    color: $fontColorW;
    background: black;
    opacity: 0.5;
    position: absolute;
    right: 0px;
    // top: 45%;
    bottom: 55px;
    z-index: 999;
    cursor: pointer;
  }
  .more:hover {
    transform: scale(1.1, 1.1);
    opacity: 0.6;
  }
  .pre {
    width: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    font-size: $fontSizeTitle;
    color: $fontColorW;
    background: black;
    opacity: 0.5;
    position: absolute;
    left: 0px;
    // top: 45%;
    bottom: 55px;
    z-index: 999;
    cursor: pointer;
  }
  .pre:hover {
    transform: scale(1.1, 1.1);
    opacity: 0.6;
  }
}
</style>
